import NavBar from './components/NavBar'
import Menu from './components/Menu'
import Cart from './components/Cart'
import FoodsCategory from './components/FoodsCategory'
import { useDispatch, useSelector } from 'react-redux'
import { getFoodList } from './store/modules/takeaway'
import './App.scss'
import { useEffect } from 'react'

// const foodsList = [
//   {
//     "tag": "318569657",
//     "name": "一人套餐",
//     "foods": [
//       {
//         "id": 8078956697,
//         "name": "烤羊肉串(10串)",
//         "like_ratio_desc": "好评度100%",
//         "month_saled": 40,
//         "unit": "10串",
//         "food_tag_list": ["点评网友推荐"],
//         "price": 90,
//         "picture": "https://zqran.gitee.io/images/waimai/8078956697.jpg",
//         "description": "",
//         "tag": "318569657"
//       }
//     ]
//   }
// ]

const App = () => {

  //触发action执行
  const dispatch = useDispatch();
  useEffect(()=>{
    dispatch(getFoodList());
  },[dispatch])

  //获取foodsList渲染数据列表
  //1. useSelector
  //state.foods 对应的是store =》index.js =>reducer的key值foods
  //foodsList  是解构对应的子文件modules/takeaway 字段 foodsList
  const { foodsList,menuIndex } = useSelector(state=>state.foods);

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item,index) => {
                return (
                  index === menuIndex &&
                  <FoodsCategory
                    key={item.tag}
                    // 列表标题
                    name={item.name}
                    // 列表商品
                    foods={item.foods}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  )
}

export default App
